<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import { ref } from "vue";

const dataSource = ref([
  {
    key: "1",
    no: 1,
    name: "Mike",
    status: "10",
    purchaseDate: "2022-02-24",
  },
]);

const columns = ref([
  {
    title: "业务编号",
    dataIndex: "no",
    key: "no",
  },
  {
    title: "申请主体",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "购买时间",
    dataIndex: "purchaseDate",
    key: "purchaseDate",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);
</script>
<template>
  <div class="pl-5 pr-5">
    <ProductBox title="我的资质">
      <div class="flex justify-between mb-5">
        <a-button type="primary">购买</a-button>
      </div>
      <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'operation'">
            <div class="flex">
              <a-button type="primary" class="mr-5">修改</a-button>
              <a-button type="primary" danger>删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </ProductBox>
  </div>
</template>
<style lang="scss" scoped></style>
